<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        main {
            width: 500px;
            height: 400px;

        }

        button {
            width: 60px;
            height: 40px;
            font-size: 25px;

        }

        p {
            margin-top: 15px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <footer>
        <button>视频</button>
        <button>直播</button>
    </footer>
    <main class="man">

    </main>

</body>

</html>
<script>

    window.onload = function () {
        var but = document.querySelectorAll("footer")
        for (var i = 0; i < but.length; i++) {
            if (i != 0) {
                //光标悬浮时的事件;
                but[i].onmouseover = function () {
                    //this表示的是光标指向当前事件的事件源；
                    // this.className="kt";
                    this.setAttribute("class", "kt");
                }
                //光标离开时的事件;
                but[i].onmouseout = function () {
                    this.setAttribute("class", "");
                }
            }
        }
    }



    let homeree = `  <p><span>1</span> 加快构建网络空间命运共同体 </p>
                    <p> <span>2</span> 女子凌晨外卖被偷跪地大哭 官方回应</p>
                    <p><span >3</span> 官方：到2025年居民拥有电子健康码</p>
                    <p><span>4</span>从历届航展看26年中国空天变化</p>
                    <p> <span>5</span> 如何结束新冠？112国专家达成共识 </p>
                    <p><span>6</span> 吸入新冠疫苗在京津等地可接种</p>`
    let cartree = ` <p><span>7</span> 河南乡镇协助富士康招工 一村出一人</p>
                    <p> <span>8</span> 南京一动物园直播筹款：揭不开锅了</p>
                    <p><span>9</span> 亚马逊市值缩水超1万亿美元</p>
                    <p><span>10</span> 农民工自学考下12本证</p>
                    <p> <span>11</span> 美国16人感染李斯特菌</p>
                    <p><span>12</span> 六旬男子伤害1名女性后坠桥身亡</p>`


    let main = document.querySelectorAll("main")

    var routes = [
        { path: "/home", component: homere },
        { path: "/cart", component: cartre },
    ]

    var an = [...document.querySelectorAll("button")]
    an.forEach((item, index) => {
        item.onclick = function (e) {
            e.preventDefault();
            history.pushState({}, '', routes[index].path)
            routes[index].component();
        }

    })
    function homere() {
        document.querySelector('.man').innerHTML = homeree;
    }
    //渲染服务的内容
    function cartre() {
        document.querySelector('.man').innerHTML = cartree;
    }
</script>